<template>
    <div class="block text-center">
        <el-card z-index="1">
            <el-form-item label="">
                <el-button style="" type="primary" @click="previewClick">添加</el-button>
                <el-button style="" type="success" @click="previewClick">预览</el-button>
            </el-form-item>
            <el-table border style="margin: 10px 0px;z-index: 2;" :data="tableArr" height="650">
                <el-table-column label="序号" type="index" align="center" width="80px"></el-table-column>
                <el-table-column label="图片" align="center" width="300px">
                    <template #="{ row, $index }">
                        <div class="demo-image__preview">
                            <el-image style="width:90%" :src="row.url" :zoom-rate="1.2" :max-scale="7" :min-scale="0.2"
                                fit="cover" :preview-src-list="[row.url]" z-index="99" hide-on-click-modal='true' />
                        </div>
                    </template>
                </el-table-column>
                <el-table-column label="标题" align="center" prop="notice"></el-table-column>
                <el-table-column label="操作" align="center" width="170px">
                    <template #="{ row, $index }">
                        <el-button type="primary" size="small" icon="Edit"></el-button>
                        <el-button type="danger" size="small" icon="Delete"></el-button>
                    </template>
                </el-table-column>
            </el-table>
            <p style="text-align: right; color: red;">Ps：目前点击图片预览存在BUG</p>

            <div style="text-align: center;">
                <p>接下去要实现的功能：1、是否启用该图片；2、操作逻辑</p>
            </div>
        </el-card>

        <!-- 预览效果 -->
        <el-drawer v-model="drawer" :direction="direction" size="65%">
            <template #header>
                <h4>轮播图预览</h4>
            </template>
            <template #default>
                <div class="previewCarousel">
                    <el-carousel height="400px" motion-blur>
                        <el-carousel-item v-for="item in tableArr" :key="item.id">
                            <img :src="item.url" alt="" style="width: 100%;height: 100%;">
                        </el-carousel-item>
                    </el-carousel>
                </div>
            </template>
            <template #footer>
                <div style="flex: auto">
                    <el-button @click="cancelClick">取消预览</el-button>
                </div>
            </template>
        </el-drawer>
    </div>
</template>

<script setup lang="ts">
    import { reactive, ref } from 'vue'
    import { ElMessageBox } from 'element-plus'
    import type { DrawerProps } from 'element-plus'


    const drawer = ref(false)
    const direction = ref<DrawerProps['direction']>('ttb')
    const radio1 = ref('Option 1')

    let tableArr = reactive([{
        id: '1',
        notice: '华为见非凡品牌盛典',
        url: 'https://res.vmallres.com/uomcdn/CN/cms/202409/178157daa98948028705f4fd357952c2.jpg'
    }, {
        id: '2',
        notice: '全景智慧旗舰轿车——享界S9',
        url: 'https://res.vmallres.com/uomcdn/CN/cms/202408/75f0c932ae5042028e151439c202d53d.jpg'
    },])

    const handleClose = (done: () => void) => {
        ElMessageBox.confirm('Are you sure you want to close this?')
            .then(() => {
                done()
            })
            .catch(() => {
                // catch error
            })
    }
    function previewClick() {
        drawer.value = true
    }

    function cancelClick() {
        drawer.value = false
    }
    function confirmClick() {
        ElMessageBox.confirm(`Are you confirm to chose ${radio1.value} ?`)
            .then(() => {
                drawer.value = false
            })
            .catch(() => {
                // catch error
            })
    }
</script>

<style scoped>
    .previewCarousel {}

    .el-carousel__item h3 {
        color: #475669;
        opacity: 0.75;
        line-height: 200px;
        margin: 0;
        text-align: center;
    }

    .el-carousel__item:nth-child(2n) {
        background-color: #99a9bf;
    }

    .el-carousel__item:nth-child(2n + 1) {
        background-color: #d3dce6;
    }
</style>